<template>
    <div v-loading="loading">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="relative isolate overflow-hidden bg-white px-6 py-20 text-center sm:px-16 sm:shadow-sm">
                <p class="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                    源码广场 —— 搜索你想要的源码?
                </p>
                <form action="">
                    <label
                        class="mx-auto mt-8 relative bg-white min-w-sm max-w-2xl flex flex-col md:flex-row items-center justify-center border py-2 px-2 rounded-2xl gap-2 shadow-2xl focus-within:border-gray-300"
                        for="search-bar">

                        <input id="search-bar" placeholder="请输入内容" name="q"
                            class="px-6 py-2 w-full rounded-md flex-1 outline-none bg-white">
                        <button type="submit"
                            class="w-full md:w-auto px-6 py-3 bg-black border-black text-white fill-white active:scale-95 duration-100 border will-change-transform overflow-hidden relative rounded-xl transition-all">
                            <div class="flex items-center transition-all opacity-1">
                                <span
                                    class="text-sm font-semibold whitespace-nowrap truncate mx-auto flex justify-center items-center gap-2">
                                    <el-icon size="20px">
                                        <Search />
                                    </el-icon>
                                    搜索
                                </span>
                            </div>
                        </button>
                    </label>
                </form>
                <svg viewBox="0 0 1024 1024"
                    class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
                    aria-hidden="true">
                    <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7">
                    </circle>
                    <defs>
                        <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
                            <stop stop-color="#3b82f6"></stop>
                            <stop offset="1" stop-color="#1d4ed8"></stop>
                        </radialGradient>
                    </defs>
                </svg>
            </div>
        </div>
        <div class=" flex flex-wrap md:grid-cols-3 md:gap-6 sm:grid sm:grid-cols-2 lg:grid-cols-4 cursor-pointer">
            <div v-for="item in dataList" :key="item.id">
                <projectItem :item="item" />
            </div>
        </div>
        <el-card class="mt-12">
            <el-pagination background layout="prev, pager, next" :total="1000" @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import projectItem from '../../components/front/projectItem.vue';
import { ref } from 'vue';
import { http } from '../../axios';


const dataList = ref<Array<TProject> | []>([]);
const loading = ref(false);
const handleDataList = async () => {
    loading.value = true;
    const { data, code } = await http.request<Array<TProject>>({
        url: 'project',
        method: 'post'
    });
    if (code === 0) {
        loading.value = false;
        dataList.value = data;
    }
}
handleDataList();

const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style lang="scss" scoped></style>